/**
 * Created by MinTher on 2017/6/28.
 * @author:bjzhang
 */
import React,{ Component } from 'react';
import {
    StyleSheet,
    Image,
    View,
    Text,
    Platform,
    TouchableHighlight,
    TouchableOpacity,
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import AddImageText from './image-text';
const options = {
    title: '相册',
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'相册',
    customButtons:[{name: 'video', title: '视频'}],
    quality:0.75,
    allowsEditing:true,
    noData:false,
    mediaType:'photo',
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};

export default class NewChest extends Component{
    constructor(){
        super();
    }
    CloseNew(){
        typeof this.props.onClosed == 'function' && this.props.onClosed();
    }
    componentDidUpdate(prevProps: Props<T>) {
        // if (prevProps.navigationState.index !== this.props.navigationState.index) {
        //     setTimeout(this._transitionTo, 0, this.props.navigationState.index);
        // }
    }
    jumpSend(response,type){  // 1,图片,2-视频
        let source,that = this;
        // You can display the image using either data...
        // source = { uri: 'data:image/jpeg;base64,' + response.data };
        // Or a reference to the platform specific asset location
        // Android
        source = { uri: response.uri };
        typeof that.props.onNavigation && that.props.onNavigation.navigate('AddImageText',{ media:source,type:type });
    }
    openAlbum(){
        let that = this;
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);
            if (response.didCancel) {
                console.log('User cancelled image picker');
            }else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton){
                //打开系统相册
                // options.mediaType = 'video';
                ImagePicker.launchImageLibrary({
                    title: '相册',
                    quality:0.75,
                    allowsEditing:true,
                    noData:false,
                    mediaType:'video',
                    storageOptions: {
                        skipBackup: true,
                        path: 'video'
                    }
                }, (response)  => {
                    if(response)
                        that.jumpSend(response,2);
                });
            }
            else {
                that.jumpSend(response,1);
            }
        });
    }
    redPacket(){
        typeof this.props.onNavigation && this.props.onNavigation.navigate('AddRedPacket');
    }
    joinEvent(){
        typeof this.props.onNavigation && this.props.onNavigation.navigate('JoinNewEvent');
    }
    render(){
        // const {goBack} = this.props.navigation;
        return(
            <View style={[styles.container,this.props.oStyle]}>
                <View>
                    <Text style={styles.chestTip}>给路过的人留下点什么？</Text>
                    <Text style={styles.addressTx}>重庆市, 渝北区, 松石支路108号</Text>
                </View>
                <View style={styles.btnWrap}>
                    <TouchableOpacity activeOpacity={.7} onPress={this.openAlbum.bind(this)}>
                        <View style={styles.touchCenter}>
                            <Image source={require('../../icon/btn/btn_pub_camera.png')}/>
                            <Text style={styles.btnText}>照片/视频</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={.7} onPress={this.redPacket.bind(this)}>
                        <View style={styles.touchCenter}>
                            <Image source={require('../../icon/btn/btn_money.png')}/>
                            <Text style={styles.btnText}>红包</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={.7} onPress={this.joinEvent.bind(this)}>
                        <View style={styles.touchCenter}>
                            <Image source={require('../../icon/btn/btn_shopping.png')}/>
                            <Text style={styles.btnText}>活动</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.closeWrap}>
                    <TouchableOpacity activeOpacity={.7} onPress={this.CloseNew.bind(this)}>
                        <Image source={require('../../icon/menu/menu_icon_off.png')}/>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:'column',
        justifyContent:'space-between',
        backgroundColor:'rgba(0,0,0,.85)'
    },
    chestTip:{
        fontSize:24,
        color:'#fff',
        marginLeft:40,
        marginTop:65,
    },
    addressTx:{
        fontSize:14,
        color:'#B0B2C2',
        marginLeft:40,
    },
    btnWrap:{
        marginLeft:50,
        marginRight:49,
        flex:1,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'flex-end',
    },
    btnText:{
        marginTop:10,
        color:'#fff'
    },
    touchCenter:{
        justifyContent:'center',
        alignItems:'center',
    },
    closeWrap:{
        alignItems:'center',
        marginTop:30,
        marginBottom:30,
    },
})

